<!--  -->
<template>
  <v-container class="pa-0">
    <v-row>
      <v-col cols="12" sm="6" md="4" lg="3">
        <v-hover v-slot:default="{ hover }">
          <v-card :elevation="hover ? 20 : 2" :class="{ 'on-hover': hover }">
            <v-img :aspect-ratio="16/9">
              <v-file-input
                  solo
                  :multiple="multiple"
                  full-width
                  flat
                  filled
                  class=""
                  :label="label"
                  prepend-inner-icon="add_photo_alternate"
                  prepend-icon=""
                  :messages="messages"
                  error-count='2'
                  v-model="inputFile"
                  @change="onChange">
                </v-file-input>
                <!-- <v-card-actions>
                  <v-btn @click="upload">开始上传</v-btn>
                </v-card-actions> -->
            </v-img>
          </v-card>
        </v-hover>
      </v-col>
      <v-col cols="12" sm="6" md="4" lg="3" v-for="(item,index) in tmpValue" :key="index">
        <v-hover v-slot:default="{ hover }">
          <v-card :elevation="hover ? 20 : 2" :loading="tmpIndex === index">
            <v-img :src="item + '?x-oss-process=image/resize,h_250'" :aspect-ratio="16/9">
              <template v-slot:placeholder>
                <v-row class="fill-height ma-0" align="center" justify="center">
                  <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                </v-row>
              </template>
              <v-btn v-if="index === 0 && cover !== null" absolute color="success" small><v-icon small>check</v-icon>封面</v-btn>
              <v-expand-transition>
                <div
                  v-if="hover"
                  class="d-flex transition-fast-in-fast-out grey darken-2 v-card--reveal display-3 white--text"
                  style="height: 25%;"
                >
                <v-row justify="space-between" align="end">
                  <v-col v-if="cover !== null">
                    <v-tooltip bottom>
                      <template v-slot:activator="{ on }">
                        <v-btn block icon v-on="on" color="success" @click="onBtnSetCover(item, index)"><v-icon large>photo</v-icon></v-btn>
                      </template>
                      <span>设置封面</span>
                    </v-tooltip>
                  </v-col>
                  <v-col>
                    <v-tooltip bottom>
                      <template v-slot:activator="{ on }">
                        <v-btn block icon v-on="on" color="info" @click="onBtnPreview(index)"><v-icon large>zoom_in</v-icon></v-btn>
                      </template>
                      <span>预览</span>
                    </v-tooltip>
                  </v-col>
                  <v-col>
                    <v-tooltip bottom>
                      <template v-slot:activator="{ on }">
                        <v-btn block icon v-on="on" color="error" @click="onBtnDelete(item, index)"><v-icon large>delete</v-icon></v-btn>
                      </template>
                      <span>删除</span>
                    </v-tooltip>
                  </v-col>
                </v-row>
              </div>
              </v-expand-transition>
            </v-img>
          </v-card>
        </v-hover>
      </v-col>
      <v-col cols="12" sm="6" md="4" lg="3" v-for="item in fileList" :key="item.name">
        <v-hover v-slot:default="{ hover }">
          <v-card :elevation="hover ? 20 : 2" :loading="true" >
            <v-img :src="getDataurl(item)" :aspect-ratio="16/9"></v-img>
          </v-card>
        </v-hover>
      </v-col>
    </v-row>
    <!-- <ImagePreview v-model="preview"/> -->
  </v-container>
</template>
<script>
import { fetchAliyunOSSPolicy } from '@/api/attachment.js'
import * as API from '@/api/aliyunoss.js'
// import ImagePreview from './ImagePreview.vue'
export default {
  name: 'AliyunOSSComponent',
  // components: { ImagePreview },
  props: {
    value: {
      type: Array,
      default: () => { return [] }
    },
    cover: {
      type: String,
      default: null
    },
    label: {
      type: String,
      default: '图片上传'
    },
    autoUpload: {
      type: Boolean,
      default: true
    },
    multiple: {
      type: Boolean,
      default: true
    },
    maximum: {
      type: Number,
      default: 10
    },
    maxSize: {
      type: Number,
      default: 5 * 1024 * 1024 * 1024
    },
    allowExt: {
      type: Array,
      default: () => { return ['jpeg', 'jpe', 'jpg', 'gif', 'png', 'webp'] }
    }
  },
  data: function () {
    return {
      policy: {},
      inputFile: [],
      fileList: [], // 上传文件列表
      tmpIndex: null, // 临时索引
      tmpValue: this.value,
      preview: null
    }
  },
  created: function () {
    fetchAliyunOSSPolicy().then(res => {
      this.policy = res.data
    })
  },
  watch: {
    tmpValue: function(newVal, oldVal) {
      if (this.tmpValue.length > 0) {
        this.$emit('update:cover', this.tmpValue[0])
      }
    }
  },
  computed: {
    messages: function() {
      return [
        '最多上传' + this.maximum + '张图片',
        '最大只能上传' + this.calcSize(this.maxSize) + '大小的图片'
      ]
    }
  },
  methods: {
    getDataurl: function(file) {
      return window.URL.createObjectURL(file)
    },
    // updateValue: function() {
    // },
    onChange: function(file) {
      const _that = this
      if (file instanceof File) {
        _that.fileList.push(file)
      } else if (file instanceof Array) {
        file.forEach(e => {
          if (e instanceof File) {
            _that.fileList.push(e)
          }
        })
      }
      this.inputFile = []
      if (this.autoUpload) {
        this.upload()
      }
    },
    onBtnDelete: function(url, index) {
      this.tmpIndex = index
      API.deleteObject(url).then(res => {
        this.$toasted.success('删除成功！')
        this.tmpValue.splice(index, 1)
        this.$emit('input', this.tmpValue)
      }).finally(() => {
        this.tmpIndex = null
      })
    },
    getImageValue: function() {
      return this.value.map(e => {
        API.infoObject(e).then(res => {
          return {
            src: e,
            w: res.ImageWidth.value,
            h: res.ImageHeight.value
          }
        })
      })
    },
    onBtnPreview: function(index) {
      const _that = this
      _that.$loading.open()
      Promise.all(this.value.map(function(url) {
        // 等待异步操作完成，返回执行结果
        return API.infoObject(url).then(function(res) {
          return {
            src: url,
            w: res.ImageWidth.value,
            h: res.ImageHeight.value
          }
        })
      })).then(res => {
        _that.$loading.close()
        _that.$imagePreview(res, index)
      })
    },
    onBtnSetCover: function(url, index) {
      if (index <= 0) {
        return false
      } else {
        this.tmpValue.splice(index, 1)
        this.tmpValue.unshift(url)
        this.$emit('update:cover', url)
        this.$emit('input', this.tmpValue)
        this.$toasted.success('设置封面成功！')
      }
    },
    upload: function() {
      const length = this.fileList.length
      for (let index = 0; index < length; index++) {
        const file = this.fileList[index]
        API.postObject(this.policy, file).then(() => {
          this.tmpValue.push(this.policy.host + '/test/' + file.name)
          this.$emit('input', this.tmpValue)
          this.fileList.shift()
        })
      }
    }
  }
}
</script>
<style>
.v-card--reveal {
  align-items: center;
  bottom: 0;
  justify-content: center;
  opacity: .8;
  position: absolute;
  width: 100%;
}
</style>
